// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    id:body;
    width: 800
    height: 400
    color:"#bfbfbf"
    border.color: "black"
    border.width: 1;

    Rectangle{
        id:leftPanel;
        width:200;
        height:parent.height;
        color:"#bfbfbf"
        border.color: "black"
        border.width: 1;
        anchors.left: parent.left;

        Rectangle{
            id: dirBox;
            width:parent.width;
            height:125;
            color:"white";
            border.color: "black"
            border.width: 1;
            Rectangle{
                id: directions;
                width:parent.width;
                height:25;
                color:"lightgray";
                border.color: "black";
                border.width: 1;

                    Text{
                        //id: directions;
                        text:"Directions"
                        font.bold: true;
                        font.pointSize: 15;
                        anchors.top: parent.top;
                        anchors.left: parent.left;
                    }
            }

            Rectangle{
                id:aButton;
                width:25;
                height:25;
                border.color: "black";
                border.width: 1;
                color:"green";
                anchors.right:startDestination.left;
                anchors.rightMargin: 2;
                anchors.top: directions.bottom;
                anchors.topMargin: 5;

                Text{
                    text:"A"
                    font.bold: true;
                    font.pointSize: 15;
                    anchors.centerIn: parent;
                }
            }

            Rectangle{
                id:startDestination;
                width: 165;
                height: 25;
                anchors.top: directions.bottom;
                anchors.topMargin: 5;
                anchors.left: parent.left;
                anchors.leftMargin: 30;
                border.color: "black";
                border.width: 1;
                color:"white";

                TextInput{
                    id:startText;
                    y: 4;
                    text:"Start";
                    font.pointSize: 10;
                    anchors.left: parent.left;
                    anchors.leftMargin: 2;
                }
            }

            Rectangle{
                id:bButton;
                width:25;
                height:25;
                border.color: "black";
                border.width: 1;
                color:"green";
                anchors.right:endDestination.left;
                anchors.rightMargin: 2;
                anchors.top: startDestination.bottom;
                anchors.topMargin: 5;

                Text{
                    text:"B"
                    font.bold: true;
                    font.pointSize: 15;
                    anchors.centerIn: parent;
                }
            }

            Rectangle{
                id:endDestination;
                width: 165;
                height: 25;
                anchors.top: startDestination.bottom;
                anchors.topMargin: 5;
                anchors.left: parent.left;
                anchors.leftMargin: 30;
                border.color: "black";
                border.width: 1;
                color:"white";

                TextInput{
                    id: endText;
                    y: 4;
                    text:"End";
                    font.pointSize: 10;
                    anchors.left: parent.left;
                    anchors.leftMargin: 2;
                }
            }

            Rectangle{
                id:getDirections;
                width: 95;
                height: 23;
                border.color: "black";
                border.width: 1;
                color:"steelblue";
                anchors.top: endDestination.bottom;
                anchors.topMargin: 5;
                anchors.left: addFav.right;
                anchors.leftMargin: 2;
                Text{
                    y: 4;
                    text:"Get Directions";
                    font.pointSize: 10;
                    font.bold: true;
                    anchors.centerIn: parent;
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: setXmlSource(startText.text+"_"+endText.text), console.log(startText.text+"_"+endText.text);
                }
            }
            Rectangle{
                id:addFav;
                width: 95;
                height: 23;
                border.color: "black";
                border.width: 1;
                color:"steelblue";
                anchors.top: endDestination.bottom;
                anchors.topMargin: 5;
                anchors.left: bButton.left;
                anchors.rightMargin: 1;

                Text{
                    y: 4;
                    text:"Add Favorite";
                    font.pointSize: 10;
                    font.bold: true;
                    anchors.centerIn: parent;
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: addFavorite(startText.text+"_"+endText.text), console.log(startText.text+"_"+endText.text);
                }
            }
        }

        Rectangle{
            id: favBox;
            anchors.top: dirBox.bottom;
            width:parent.width;
            height:25;
            color:"lightgray"
            border.color: "black";
            border.width: 1;
            Text{
                id: favorites;
                text:"Favorites"
                font.bold: true;
                font.pointSize: 15;
                anchors.top: favBox.top;
                anchors.left: parent.left;
            }
        }

            Rectangle{
                id: favBoxB;
                anchors.top: favBox.bottom;
                width:parent.width;
                height:65;
                color:"white"
                border.color: "black"
                border.width: 1;
                        Component{
                            id: favsDelegate

                            Rectangle{
                                id:favButton;
                                width:75;
                                height: 15;
                                color:"gold"
                                border.color: "black";
                                border.width: 1;
                                Row{
                                    id:favsRow;
                                    spacing: 2;
                                    anchors.centerIn: favButton;
                                    Text{
                                        id:favtext;
                                        text: route;



                                    }


                                }
                                MouseArea{
                                    anchors.fill: parent
                                    onClicked: setXmlSource(favtext.text), console.log(favtext.text);
                                }
                            }

                        }

                        ListView{
                            id:favsView;
                            anchors.fill: parent
                            anchors.top: favBoxB.bottom;
                            anchors.topMargin: 2;
                            anchors.left: parent.left;
                            anchors.leftMargin: 2;
                            model: favModel;
                            delegate: favsDelegate
                            }
                        ListModel {
                             id: favModel

                             ListElement{
                                 route: "Home_School";
                             }
                         }
            }



        Rectangle{
            id:turnDirections;
            width:parent.width;
            height:185;
            color:"white";
            anchors.top:favBoxB.bottom;
            border.color: "black"
            border.width: 1;

            Rectangle{

                width:parent.width;
                height:25;
                color:"lightgray"
                border.color: "black";
                border.width: 1;
                Text{
                    id: turnByTurn;
                    text:"Route"
                    font.bold: true;
                    font.pointSize: 15;
                    anchors.top: favBox.top;
                    anchors.left: parent.left;
                }
                ListView{
                    anchors.top: turnByTurn.bottom;
                    anchors.left: turnByTurn.left;
                    anchors.leftMargin: 2;
                    width:parent.width;
                    height:150;
                    model:xmlModel;
                    delegate: Text{
                        width:parent.width;
                        text:street
                        wrapMode: Text.Wrap;

                    }
                }
            }



            XmlListModel {
                 id: xmlModel
                 source: ""
                 query: "/path/turn"


                 XmlRole { name: "street"; query: "street/string()" }
             }
        }


    }
    Rectangle{
        id:rightPanel;
        width:body.width-leftPanel.width
        height:parent.height
        color:"gray"
        border.color: "black"
        border.width: 1;
        anchors.left: leftPanel.right

        Image{
            id:mapImage;
            source: ""
        }
    }

    function setXmlSource(sourceXml){
        xmlModel.source = "Assets/Map/"+sourceXml+".xml";
        mapImage.source = "Assets/Map/"+sourceXml+".jpg";
    }

    function addFavorite(favId){
        favModel.append({"route":favId});
    }

}
//DAN
